<template>
	<view class="identity">
		<wTitleBar title="注册" textColor="#fff" bgColor="#B8212B" textAlign="center" isReturn="true"></wTitleBar>
		<view class="identity-title">
			<text @click="open">您的身份是？</text>
		</view>
		<view class="identity-list">
			<!-- <image src="@/static/image/mine/company_manage.png" @click="registerIdentity('工程企业')"></image>
			<image src="@/static/image/mine/role-companier.png" @click="registerIdentity('劳务企业')"></image>-->
			<view class="img">
				<image src="@/static/image/mine/role-monitor.png" @click="registerIdentity('班组长')">
				</image>
				<u-radio-group v-model="value1">
					<u-radio @change="radioChange1" :name="name1" active-color="#00C853">
					</u-radio>
				</u-radio-group>
			</view>

			<view class="img">
				<image src="@/static/image/mine/role-worker.png" @click="registerIdentity('工人')"></image>
				<u-radio-group v-model="value2">
					<u-radio @change="radioChange2" :name="name2" active-color="#00C853">
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="authorize">
				<image class="auth-icon" src="@/static/image/authorize.png" mode=""></image>
				<text class="auth-title">授权申请</text>
				<view class="line">
				</view>
				<text class="auth-content">申请获取您的公开信息（昵称、头像）</text>
				<view class="button-group">
					<button class="cancel-btn" @click="cancel">取消</button>
					<button class="auth-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">授权</button>
				</view>
			</view>
		</uni-popup>
		<button class="submit" @click="submit">提交审核</button>
	</view>
</template>

<script>
	// import api from '../../static/js/api.js'
	import request from '@/static/js/request.js'
	import api from '@/static/js/api.js'

	import wTitleBar from '@/components/w-titleBar/w-titleBar.vue'

	let self;
	export default {
		data() {
			return {
				userInfo: {},
				height: 0,
				value1: '',
				value2: '',
				name1: '班组长',
				name2: '工人',
				account_type: ''
			}
		},
		onUnload() {
			self = this;
			wx.enableAlertBeforeUnload({
				message: "注册未完成，是否确认退出?",
				success: function(res) {
					// console.log("方法注册成功：", res);
					// uni.showLoading({
					// 	title: '正在退出'
					// })
					// api.delete_role(access_token, 'res.users', '_api_unlink_user', uid, mobile).then(res => {
					// 	uni.clearStorageSync();
					// 	uni.switchTab({
					// 		url: "/pages/main/mine"
					// 	})
					// })
					uni.switchTab({
						url: "/pages/main/mine"
					})
				},
				fail: function(errMsg) {
					// console.log("方法注册失败：", errMsg);
				},
			});
		},
		components: {
			wTitleBar
		},
		methods: {
			radioChange1(e) {
				this.value2 = ''
				this.account_type = e
			},
			radioChange2(e) {
				this.value1 = ''
				this.account_type = e
			},
			submit() {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				let uid = userInfo.uid;
				let access_token = userInfo.access_token;
				let mobile = userInfo.login;
				if (this.account_type == '') {
					uni.showToast({
						title: '请选择身份',
						icon: 'none'
					})
				} else {
					api.register(access_token, 'res.users', '_api_choose_account_type', uid, this.account_type, mobile)
						.then(
							res => {
								userInfo.account_type = res.data.account_type;
								userInfo.team_id = res.data.team_id
								uni.setStorageSync('userInfo', JSON.stringify(userInfo));
								uni.showToast({
									title: '注册成功'
								})
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/main/mine"
									})
								}, 1000)
							})
				}
			},
			registerIdentity(name) {
				// if (uni.getStorageSync('userInfo')) {
				// 	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				// } else {
				// 	this.userInfo = {};
				// }
				// if (!this.userInfo.access_token) {
				// 	this.$refs.popup.open()
				// 	return;
				// }

				// uni.navigateTo({
				// 	url: `/pages/main/mine/MineRealAuthentication?accountType=${name}`
				// 	// url:"/pages/main/mine"
				// })
				if (name == '班组长') {
					this.value2 = ''
					this.value1 = name
				} else {
					this.value1 = ''
					this.value2 = name
				}
				this.account_type = name
			},
			getuserinfo(e) {
				if (e.detail.rawData) {
					uni.showLoading({
						title: '正在登录'
					})
					uni.login({
						success: function(loginRes) {
							var code = loginRes.code;
							uni.getUserInfo({
								success: (res) => {
									console.log(res);
									let data = {
										code,
										encryptedData: res.encryptedData,
										iv: res.iv,
										vmp: 'vmp'
									};
									request.post('/api/v1/signup/0', data).then(resp => {
										uni.setStorageSync('userInfo', JSON.stringify(resp
											.data));
										uni.setStorageSync('isVerified', resp.data
											.is_confirm == "True" ? true : false)
										uni.hideLoading();
										self.$refs.popup.close();
										uni.$emit('reviseData')
										uni.navigateBack();

									}).catch(e => {
										uni.showToast({
											icon: 'none',
											title: e.message
										})
									})
								},
								fail: () => {
									console.log("未授权");
								}
							})
						}
					});
				}

			},
			cancel() {
				this.$refs.popup.close()
			}

		}
	}
</script>
<style lang="less" scoped>
	.identity {
		overflow: hidden;
	}

	.identity-title {
		margin: 48rpx 0rpx 56rpx 64rpx;
		font-size: 40rpx;
		font-weight: 500;
		color: #333333;
		line-height: 56rpx;
	}

	image {
		// width: 622rpx;
		// height: 252rpx;
		width: 550rpx;
		height: 222rpx;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	.img {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.authorize {
		width: 100vw;
		height: 30vh;

		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 40rpx 26rpx 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.auth-icon {
			width: 66rpx;
			height: 76rpx;
			margin-bottom: 12rpx;
		}

		.auth-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}

		.auth-content {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.button-group {
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			width: 400rpx;
		}

		.line {

			height: 2rpx;
			background: #EEEEEE;
			width: 100%;
			margin: 22rpx 0;
		}

		.auth-btn {

			flex: 1;
			// width: 300rpx;
			height: 68rpx;
			background: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: #FFFFFF;
		}

		.cancel-btn {

			flex: 1;
			// width: 300rpx;
			height: 68rpx;
			color: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;
			margin-right: 20rpx;

			font-weight: 400;

		}
	}

	.status_bar {
		// height: var(--status-bar-height);  
		width: 100%;
		background-color: #B8212B;
		// position: fixed;
		// top: 0;
	}

	/deep/.titlebarbar {
		position: relative;

		.textCenter {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			margin-left: 0rpx !important;
		}
	}

	/deep/.titlebarbar {
		font-weight: normal;
		font-size: 26rpx;

		image {
			margin-left: 0rpx;
			cursor: pointer;
		}
	}

	/deep/.uni-navbar--border {
		border: none;
	}

	/deep/.uni-navbar__header {
		background-color: #B8212B;
	}

	.submit {
		width: 50%;
		margin: 80rpx auto 0;
		font-weight: 500;
		font-size: 32rpx;
		height: 80rpx;
		background: #B8212B;
		border-radius: 8rpx;
		display: flex;
		color: #FFFFFF;
		align-items: center;
		justify-content: center;
	}
</style>
